<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			$(document).ready(function() {
				$("span").click(function(event) {
					event.stopPropagation();
					alert("The span element was clicked.");
				});
				$("p").click(function(event) {
					alert("The p element was clicked.");
				});
				$("div").click(function() {
					alert("The div element was clicked.");
				});
			});
		</script>
	</head>

	<body>
		<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
			This is a div element.
			<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span></p>
		</div>

		<p><b>Note:</b> Click on each of the elements above. When clicking on the <b>div</b> element, it will alert that the div element was clicked. When clicking on the <b>p</b> element, it will return both the p and the div element, since the p element is inside the div element. But when clicking on the <b>span</b> element, it will only return itself, and not the p and the div element (even though its inside these elements). The event.stopPropagation() stops the click event from bubbling to the parent elements.
		</p>
		<p><b>Tip:</b> Try to remove the event.stopPropagation() line, and click on the span element again (the click event will now bubble up to parent elements).</p>

	</body>

</html>